<template>
  <div id="wK_historySearch" class="wk_historySearch">
    <div v-if="!isList">
      <h3 class="h3" style="font-size: 21px;">指令收发</h3>
      <!-- 发件人 时间段 查询 -->
      <a-form-model :model="formOne" :colon="false" style="margin:10px 0">
        <a-row style="display: flex;align-items: center;">
          <a-col :span="5">
            <a-form-model-item label="发件人" class="from-item__class" :wrapper-col="{span:18}">
              <a-select v-model="formOne.sendUserId" placeholder="请选择发件人" allow-clear>
                <a-select-option value="1">张三</a-select-option>
                <a-select-option value="2">李四</a-select-option>
                <a-select-option value="3">王五</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" style="margin-left:20px;">
            <a-form-model-item label="时间段" class="from-item__class">
              <a-date-picker
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledStartDate"
                v-model="formOne.startTime"
                @openChange="handleStartOpenChange"
              />
              <span style="color:rgba(255,255,255,0.7);font-size:18px;padding:0 10px;">—</span>
              <a-date-picker
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledEndDate"
                v-model="formOne.endTime"
                @openChange="handleEndOpenChange"
                :open="endOpen"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="4" style="display: flex;justify-content: space-between;">
            <a-button
              style="letter-spacing: 8px;"
              @click="onSubmit"
              class="sousuobtn btn-style__class"
            >查询</a-button>
          </a-col>
        </a-row>
      </a-form-model>
      <!-- 表格 -->
      <div class="tableclass" >
        <a-table style="height:94%" :data-source="data" :pagination="false" :columns="columns">
          <a slot="name" slot-scope="text" align="center">{{ text }}</a>
          <template slot="addresser" slot-scope="text,record">
            <div>
              <a-icon type="mail" style="margin-right:8px" />
              {{record.addresser}}
            </div>
          </template>
          <template slot="operate">
            <div class="handle">
              <span @click="equipmentFn(record,index)" style="margin-left: 43px;">指令详情</span>
              <a-button
                style="letter-spacing: 8px;"
                @click="showCont"
                class="sousuobtn btn-style__class"
              >回复</a-button>
            </div>
          </template>
        </a-table>
        <div class="content-bottom clearfix">
          <!-- 分页器 -->
          <div class="page-box">
            <a-pagination
              :show-total="total => `共 ${total} 条记录`"
              v-model="page.current"
              :total="total"
              :defaultPageSize="page.size"
              :item-render="itemRender"
              @change="pagechangeFn"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 回复弹窗 -->
    <div v-show="show">
      <div class="page-condition">
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <div class="page-header">
            <h3 class="h3">指令收发</h3>
          </div>
        </a-form>
        <div>
          <a-row style="margin-left: -27px; margin-top: 15px;">
            <a-col :span="10" :offset="1" style="display: flex;">
              <a-form-model-item class="form-item" label="指令ID" labelAlign="right"></a-form-model-item>
              <span style="color: #bebebe; font-size: 24px;">xxxxxxxxx</span>
            </a-col>
            <a-col :span="6" :offset="4" style="display: flex;">
              <a-form-model-item class="form-item" label="发件人" labelAlign="right"></a-form-model-item>
              <span style="color: #bebebe; font-size: 24px;">xxxxxxxxx</span>
            </a-col>
          </a-row>
          <a-row style="margin-left: -27px; margin-top: 15px;">
            <a-col :span="6" :offset="1" style="display: flex;">
              <a-form-model-item class="form-item" label="是否已读" labelAlign="right"></a-form-model-item>
              <span style="color: #bebebe; font-size: 24px;">xxxxxxxxx</span>
            </a-col>
          </a-row>
          <a-row style="margin-left: -27px; margin-top: 15px;">
            <a-col :span="17" :offset="1" style="display: flex;">
              <a-form-model-item class="form-item" label="回复内容" labelAlign="right"></a-form-model-item>
              <a-textarea :rows="9" placeholder="xxxxxxxxx" style="font-size: 24px;" />
            </a-col>
          </a-row>
          <a-row style="margin-left: 67%; margin-top: 12px;">
            <a-col :span="17" :offset="1">
              <a-button
                style="letter-spacing: 8px;"
                @click="showCont"
                class="sousuobtn btn-style__class"
              >回复</a-button>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eventBush from "@/eventBush";
export default {
  name: "index",
  data() {
    return {
      page: {
        current: 1,
        size: 8,
      },
      data: [],
      isshow: false,
      title: "",
      isList: false,
      show: false,
      equipmentData: {},
      myCharts: "",
      isEcharts: true,
      endOpen: false,
      form: {
        name: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formOne: {
        current: 1,
        size: 10,
        startTime: null,
        endTime: null,
        sendUserId: "1",
      },
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          width: "10%",
          customRender: (text, record, index) =>
            `${(this.form.current - 1) * this.form.size + index + 1}`,
        },
        {
          title: "发件人",
          dataIndex: "nickname",
          align: "center",
        },
        {
          title: "部门",
          dataIndex: "deptName",
          align: "center",
        },
        {
          title: "主题",
          dataIndex: "themeType",
          align: "center",
        },
        {
          title: "时间",
          dataIndex: "sendTime",
          align: "center",
          width: "15%",
        },
        {
          title: "操作",
          align: "center",
          scopedSlots: { customRender: "operate" },
          width: "20%",
        },
      ],
      current: 1,
      size: 9,
      total: 0,
    };
  },
  methods: {
    /* 回复弹窗 */
    showCont: function () {
      this.show = !this.show;
      this.isList = !this.isList;
    },
    disabledStartDate(startValue) {
      const endValue = this.form.data2;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.form.date1;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    handleSubmit() {},
    // 切换图表方法
    // isEchartsFn() {
    //   this.isEcharts = !this.isEcharts;
    //   if (!this.isEcharts) {
    //     this.lineEcharFn();
    //   }
    // },
    //获取数据
    onSubmit() {
      this.formOne.startTime = new Date(this.formOne.startTime).getTime();
      this.formOne.endTime = new Date(this.formOne.endTime).getTime();
      this.getData();
    },
    getData() {
      this.$api.Api_instructionFindSendPage(this.formOne).then((res) => {
        console.log(res);
        this.data = res.data.data;
        this.total = res.data.total;
      });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.onSubmit();
    },
  },
  updated() {
    if (!this.isEcharts) {
      this.myCharts.resize();
    }
  },
  mounted() {
    eventBush.$on("onFrom", (a) => {
      this.isshow = a;
    });
    this.getData();
  },
};
</script>
<style>
/* Form表单label */
#wK_historySearch .ant-form-item-label > label::after {
  content: "";
}
</style>
<style scoped lang="scss">
.Greenclass {
  font-weight: bold;
  color: #359843;
}
.Redclass {
  font-weight: bold;
  color: #da6957;
}
.Yellclass {
  font-weight: bold;
  color: #bdb42d;
}

#wK_historySearch {
  width: 98%;
  height: 98%;
  padding: 2%;
  box-sizing: border-box;
  position: relative;
  .sousuobtn {
    background-color: #207064;
    border-color: #207064;
  }
  .exportbtn {
    background-color: transparent;
    border: 0;
    color: #207064;
  }
  .content-bottom {
    width: 100%;
    position: absolute;
    bottom: 4%;
    right: 2%;
  }
  .page-box {
    float: right;
  }
  /* 图表 */
  .echarts-box {
    height: 85%;
    width: 100%;
  }
  .line-echarts {
    height: 90%;
  }
  .echarts-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
  }
}

::v-deep#wK_historySearch .ant-form-item {
  margin-bottom: 0;
  align-items: center;
  display: flex;
}

::v-deep#wK_historySearch .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}

::v-deep#wK_historySearch .ant-table table {
  height: auto;
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}

::v-deep .ant-spin-nested-loading,
::v-deep .ant-spin-container,
::v-deep .ant-table,
::v-deep .ant-table-content,
::v-deep .ant-table-body {
  height: 100%;
}

::v-deep#wK_historySearch .ant-table-thead > tr > th {
  line-height: 22px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep#wK_historySearch .ant-table-tbody > tr > td {
  border-bottom: 1px solid #2c6a60;
}
// 分页
::v-deep#wK_historySearch .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>

